---
title: lint-staged
description: Jalankan Ultracite secara otomatis pada file Git yang di-stage menggunakan lint-staged
---

Ultracite terintegrasi secara mulus dengan [lint-staged](https://github.com/okonet/lint-staged) untuk secara otomatis memformat dan melakukan lint pada kode Anda sebelum setiap commit. Ini memastikan hanya kode yang bersih dan terformat dengan baik yang masuk ke repository Anda.

## Apa itu lint-staged?

lint-staged adalah alat yang menjalankan linter dan pemformat terhadap file Git yang di-stage. Ini sangat berguna karena:

- Hanya memproses file yang benar-benar akan dikomit
- Mencegah kode yang terformat buruk masuk ke repository Anda
- Berjalan cepat karena hanya memeriksa file yang diubah
- Terintegrasi sempurna dengan Git hooks

## Cara Ultracite Menggunakan lint-staged

Saat Anda menjalankan `npx ultracite init`, jika Anda memilih opsi lint-staged, Ultracite secara otomatis:

1. **Menginstal lint-staged** sebagai dependensi pengembangan
2. **Membuat atau memperbarui** konfigurasi lint-staged Anda
3. **Mengonfigurasi pemformat** untuk dijalankan pada tipe file yang relevan

Konfigurasi default menjalankan `npx ultracite fix` pada tipe file ini:
- File JavaScript/TypeScript (`.js`, `.jsx`, `.ts`, `.tsx`)
- File JSON (`.json`, `.jsonc`)
- File CSS (`.css`, `.scss`)
- File Markdown (`.md`, `.mdx`)

## Format Konfigurasi yang Didukung

Integrasi lint-staged Ultracite mendukung semua format konfigurasi lint-staged standar:

### package.json

```json title="package.json"
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
  }
}
```

### .lintstagedrc.json

```json title=".lintstagedrc.json"
{
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
}
```

### .lintstagedrc.js (CommonJS)

```javascript title=".lintstagedrc.js"
module.exports = {
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
};
```

### .lintstagedrc.mjs (ES Modules)

```javascript title=".lintstagedrc.mjs"
export default {
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
};
```

### .lintstagedrc.yaml

```yaml title=".lintstagedrc.yaml"
"*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}":
  - 'npx ultracite fix'
```

## Penggabungan Konfigurasi Cerdas

Jika Anda sudah memiliki konfigurasi lint-staged, Ultracite akan:

- **Mendeteksi** format konfigurasi yang ada
- **Menggabungkan** aturan Ultracite dengan aturan yang sudah ada
- **Mempertahankan** konfigurasi kustom Anda
- **Memperbarui** file secara langsung

Ini berarti Anda dapat menjalankan `npx ultracite init` dengan aman bahkan jika Anda sudah menyiapkan lint-staged.

## Cara Kerjanya

1. **Hook pra-commit**: lint-staged berjalan sebelum setiap commit melalui Husky  
2. **Deteksi Berkas**: Hanya file yang di-stage yang cocok dengan pola yang diproses  
3. **Perintah Format**: `npx ultracite fix` dijalankan pada setiap file yang cocok  
4. **Perbaikan otomatis**: Biome secara otomatis memperbaiki masalah jika memungkinkan  
5. **Menambahkan kembali ke staging**: File yang telah diperbaiki secara otomatis ditambahkan kembali ke staging untuk dikomit

## Konfigurasi Manual

Jika Anda perlu menyesuaikan setup lint-staged Anda, Anda dapat memodifikasi konfigurasi setelah inisialisasi:

```json title="package.json"
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["npx ultracite fix", "npm run test:unit"],
    "*.{json,jsonc}": ["npx ultracite fix"],
    "*.{css,scss}": ["npx ultracite fix", "npm run test:styles"],
    "*.{md,mdx}": ["npx ultracite fix"]
  }
}
```

## Integrasi Perintah

Integrasi lint-staged bekerja dengan struktur perintah Ultracite:

- **`npx ultracite fix`**: Menjalankan Biome dengan perbaikan otomatis (digunakan oleh lint-staged)  
- **`npx ultracite check`**: Menjalankan Biome tanpa perbaikan otomatis (untuk pemeriksaan CI/manual)

## Pemecahan Masalah

### Konfigurasi Tidak Ditemukan
Jika Anda melihat error tentang konfigurasi lint-staged yang hilang:

```bash
npx ultracite init  # Re-run initialization
```

### Masalah ESM/CommonJS
Ultracite secara otomatis mendeteksi tipe proyek Anda dan membuat format konfigurasi yang sesuai:

- **Proyek ESM** (dengan `"type": "module"` di package.json) mendapatkan konfigurasi `.mjs`  
- **Proyek CommonJS** mendapatkan konfigurasi `.cjs`  
- **Cadangan**: Membuat `.lintstagedrc.json` jika deteksi modul gagal

### Konflik Konfigurasi yang Ada
Jika Anda memiliki konfigurasi yang kompleks, Anda mungkin perlu melakukan penggabungan manual:

1. Cadangkan konfigurasi lint-staged Anda yang ada  
2. Jalankan `npx ultracite init`  
3. Gabungkan secara manual aturan kustom yang perlu Anda pertahankan

## Praktik Terbaik

1. **Buat tetap cepat**: Jalankan hanya pemeriksaan esensial di lint-staged  
2. **Gunakan pola spesifik**: Targetkan hanya file yang perlu diproses  
3. **Gabungkan dengan CI**: Gunakan lint-staged untuk pemeriksaan lokal cepat, linting penuh di CI  
4. **Uji setup Anda**: Lakukan commit percobaan untuk memastikan semuanya berfungsi

## Terkait

- [Integrasi Husky](/integration/husky) - Pengaturan Git hooks  
- [Konfigurasi](/configuration) - Opsi konfigurasi Biome  
- [Pengaturan](/setup) - Penyiapan awal proyek